<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>父组件部分</h1>
    <h1>{{rdata}}</h1>
    <ul>
      <li v-for="(item,index) in mylist" :key="index">{{item}}</li>
    </ul>
    <hr>
    <zi-com @send="getData"></zi-com>
  </div>
  <!-- 子组件的模板部分 -->
  <template id="zi">
    <div>
      <h1>子组件</h1>
      <button @click="zisend">点击向父组件传参</button>
    </div>
  </template>
  <script src="./vue.js"></script>
  <script>
    // 自定义事件传值
    //1.子组件绑定自定义事件
    //2.子组件内部用this.$emit('事件名'，传送的数据，传送的数据)
    //3.父组件内部的事件函数的形参 就是传来的数据
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          rdata: "",
          mylist: []
        }
      },
      methods: {
        getData(a, b) { //自定义事件的触发函数
          console.log(a)
          this.rdata = a;
          console.log(b)
          this.mylist = b;
        }
      },
      components: {
        ziCom: {
          template: "#zi",
          data() {
            return {
              zidata: "子组件的数据",
              list: [1, 2, 3]
            }
          },
          // mounted() {
          //   // 子组件挂载完成  触发父组件的自定义事件 并传值
          //   this.$emit('send', this.zidata, this.list)
          // },
          methods: {
            zisend() {
              // 点击按钮 子组件 去触发父组件自定义事件 并传值
              this.$emit('send', this.zidata, this.list)
            }
          },
        }
      }
    })




  </script>
</body>

</html>